<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-11-19 16:47:59
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/echarts.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/vant.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<style type="text/css">
		.row {
			padding: 5px 5px 0 5px;
		}

		.row .row-full {
			padding: 10px;
			background: #fff;
		}

		.title {
			overflow: hidden;
			margin-bottom: 10px;
			font-size: 16px;
		}

		.title .title-left {
			float: left;
			font-weight: 700;
		}

		.title .title-left .img {
			display: inline-block;
			padding: 7px;
			text-align: center;
			border-radius: 4px;
			margin-right: 5px;
		}

		.title .title-left img {
			width: 22px;
			height: 22px;
		}

		.title .title-right {
			float: right;
			height: 36px;
			line-height: 36px;
		}

		.title .title-right span {
			font-size: 15px;
			color: #000;
			margin-left: 5px;
		}

		.title .title-right span.on {
			color: #33b5e6;
			border-bottom: 2px solid #33b5e6;
		}

		.row-data {
			border-bottom: 1px solid #dddddd;
		}

		.row-data:last-child {
			border-bottom: 0;
		}

		.chart {
			width: 100%;
			height: 200px;
		}

		.row-data .data-title {
			height: 36px;
			color: #7d7d7d;
			line-height: 36px;
			font-size: 15px;
		}

		.row-data .data-value {
			height: 36px;
			padding-left: 30px;
			line-height: 36px;
			color: #000;
			font-weight: 700;
			font-size: 15px;
		}

		.row-data .data-title * {
			vertical-align: middle;
		}

		.row-data .data-img {
			width: 20px;
			margin-right: 10px;
		}

		.row-data .van-cell {
			font-size: 14px;
		}

		.row-data .van-cell__title {
			max-width: none;
			font-weight: 500;

		}

		.row-data .van-cell__value {
			text-align: right;
			font-size: 16px;
			line-height: 45px;
		}

		.row-data .van-cell .sort {
			display: inline-block;
			font-weight: 700;
			font-size: 16px;
			margin-right: 5px;
		}

		.row-line {
			height: 1px;
			background: #dddddd;
		}

		.more {
			font-size: 15px;
			text-align: center;
			color: #323232;
			padding: 10px;
		}

		.none {
			font-size: 15px;
			text-align: center;
			color: #7d7d7d;
			padding: 10px;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="图表配置" left-arrow @click-left="onClickLeft">
				<div slot="right" class="head-right">
					<span @click="showSearch = true;">
						<img src="../../image/search.png" />
					</span>
				</div>
			</van-nav-bar>
			<div class="body-no-bottom">
				<div class="content">
					<div class="row" v-for="(row,index) in columnData" v-if="row">
						<div class="row-full" v-if="row.chartType == 'total'">
							<div class="title">
								<div class="title-left">
									<span class="img" style="background: #64b7f9;" :style="{background:row.color}">
										<img :src="serverIP + '/res/app_icon/' + row.logo" />
									</span>
									<span>{{row.title}}</span>
								</div>
								<div class="title-right"></div>
							</div>
							<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
								<van-row>
									<van-col :span="24/item.node.length" v-for="(detail,detailIndex) in item.node">
										<div class="data-title">
											<img class="data-img" :src="serverIP + detail.icon" />
											<span>{{detail.title}}</span>
										</div>
										<div class="data-value" :style="{color:detail.color}">{{detail.value}}
										</div>
									</van-col>
								</van-row>
							</div>
						</div>
						<div class="row-full" v-else-if="row.chartType == 'piechart'">
							<div class="title">
								<div class="title-left">
									<span class="img" style="background: #64b7f9;" :style="{background:row.color}">
										<img :src="serverIP + '/res/app_icon/' + row.logo" />
									</span>
									<span>{{row.title}}</span>
								</div>
								<div class="title-right"></div>
							</div>
							<div>
								<div v-if="row.detailChartPosition == 'top'">
									<div class="chart" :id="'chart_' + row.Id"></div>
									<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
										<van-row>
											<van-col :span="24/item.node.length"
												v-for="(detail,detailIndex) in item.node">
												<div class="data-title">
													<img class="data-img" :src="serverIP + detail.icon" />
													<span>{{detail.title}}</span>
												</div>
												<div class="data-value" :style="{color:detail.color}">
													{{detail.value}}
												</div>
											</van-col>
										</van-row>
									</div>


								</div>
								<div v-else-if="row.detailChartPosition == 'right'">
									<van-row>
										<van-col :span="12">
											<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
												<van-row>
													<van-col :span="24/item.node.length"
														v-for="(detail,detailIndex) in item.node">
														<div class="data-title">
															<img class="data-img" :src="serverIP + detail.icon" />
															<span>{{detail.title}}</span>
														</div>
														<div class="data-value" :style="{color:detail.color}">
															{{detail.value}}
														</div>
													</van-col>
												</van-row>
											</div>
										</van-col>
										<van-col :span="12">
											<div class="chart" :id="'chart_' + row.Id"></div>
										</van-col>
									</van-row>
								</div>
								<div v-else-if="row.detailChartPosition == 'left'">
									<van-row>
										<van-col :span="12">
											<div class="chart" :id="'chart_' + row.Id"></div>
										</van-col>
										<van-col :span="12">
											<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
												<van-row>
													<van-col :span="24/item.node.length"
														v-for="(detail,detailIndex) in item.node">
														<div class="data-title">
															<img class="data-img" :src="serverIP + detail.icon" />
															<span>{{detail.title}}</span>
														</div>
														<div class="data-value" :style="{color:detail.color}">
															{{detail.value}}
														</div>
													</van-col>
												</van-row>
											</div>
										</van-col>
									</van-row>
								</div>
								<div v-else>

									<div class="row-data" style="border: 0;" v-for="(item,itemIndex) in row.valueArray">
										<van-row>
											<van-col :span="24/item.node.length"
												v-for="(detail,detailIndex) in item.node">
												<div class="data-title">
													<img class="data-img" :src="serverIP + detail.icon" />
													<span>{{detail.title}}</span>
												</div>
												<div class="data-value" :style="{color:detail.color}">
													{{detail.value}}
												</div>
											</van-col>
										</van-row>
									</div>
									<div class="chart" :id="'chart_' + row.Id"></div>
								</div>
							</div>
						</div>
						<div class="row-full" v-else-if="row.chartType == 'rank'">
							<div class="title">
								<div class="title-left">
									<span class="img" style="background: #64b7f9;" :style="{background:row.color}">
										<img :src="serverIP + '/res/app_icon/' + row.logo" />
									</span>
									<span>{{row.title}}</span>
								</div>
								<div class="title-right"></div>
							</div>
							<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
								<van-row>
									<van-col :span="24/item.node.length" v-for="(detail,detailIndex) in item.node">
										<div class="data-title">
											<img class="data-img" :src="serverIP + detail.icon" />
											<span>{{detail.title}}</span>
										</div>
										<div class="data-value" :style="{color:detail.color}">{{detail.value}}
										</div>
									</van-col>
								</van-row>
							</div>
							<div class="row-data">
								<van-cell-group>
									<van-cell v-for="(rankItem,rankIndex) in row.rankArray"
										:value="rankItem.total || ''">
										<div slot="title">
											<span class="sort">{{index+1}}</span>
											<span>{{rankItem.title}}</span>
										</div>
										<div slot="label">
											<div style="padding-left: 20px;"
												v-for="(nodeItem,nodeIndex) in rankItem.node">{{nodeItem}}</div>
										</div>
									</van-cell>
								</van-cell-group>
							</div>

						</div>
						<div class="row-full" v-else-if="row.chartType == 'linechart'">
							<div class="title">
								<div class="title-left">
									<span class="img" style="background: #64b7f9;" :style="{background:row.color}">
										<img :src="serverIP + '/res/app_icon/' + row.logo" />
									</span>
									<span>{{row.title}}</span>
								</div>
								<div class="title-right">
									<span v-for="(filterItem,filterIndex) in row.filterArray"
										:class="filterIndex === 0?'on':''"
										@click="toggleTab(index,filterItem,$event)">{{filterItem.name}}</span>
								</div>
							</div>
							<div>
								<div v-if="row.detailChartPosition == 'top'">
									<div class="chart" :id="'chart_' + row.Id"></div>
									<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
										<van-row>
											<van-col :span="24/item.node.length"
												v-for="(detail,detailIndex) in item.node">
												<div class="data-title">
													<img class="data-img" :src="serverIP + detail.icon" />
													<span>{{detail.title}}</span>
												</div>
												<div class="data-value" :style="{color:detail.color}">
													{{detail.value}}
												</div>
											</van-col>
										</van-row>
									</div>


								</div>
								<div v-else-if="row.detailChartPosition == 'right'">
									<van-row>
										<van-col :span="12">
											<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
												<van-row>
													<van-col :span="24/item.node.length"
														v-for="(detail,detailIndex) in item.node">
														<div class="data-title">
															<img class="data-img" :src="serverIP + detail.icon" />
															<span>{{detail.title}}</span>
														</div>
														<div class="data-value" :style="{color:detail.color}">
															{{detail.value}}
														</div>
													</van-col>
												</van-row>
											</div>
										</van-col>
										<van-col :span="12">
											<div class="chart" :id="'chart_' + row.Id"></div>
										</van-col>
									</van-row>
								</div>
								<div v-else-if="row.detailChartPosition == 'left'">
									<van-row>
										<van-col :span="12">
											<div class="chart" :id="'chart_' + row.Id"></div>
										</van-col>
										<van-col :span="12">
											<div class="row-data" v-for="(item,itemIndex) in row.valueArray">
												<van-row>
													<van-col :span="24/item.node.length"
														v-for="(detail,detailIndex) in item.node">
														<div class="data-title">
															<img class="data-img" :src="serverIP + detail.icon" />
															<span>{{detail.title}}</span>
														</div>
														<div class="data-value" :style="{color:detail.color}">
															{{detail.value}}
														</div>
													</van-col>
												</van-row>
											</div>
										</van-col>
									</van-row>
								</div>
								<div v-else>
									<div class="row-data" style="border: 0;" v-for="(item,itemIndex) in row.valueArray">
										<van-row>
											<van-col :span="24/item.node.length"
												v-for="(detail,detailIndex) in item.node">
												<div class="data-title">
													<img class="data-img" :src="serverIP + detail.icon" />
													<span>{{detail.title}}</span>
												</div>
												<div class="data-value" :style="{color:detail.color}">
													{{detail.value}}
												</div>
											</van-col>
										</van-row>
									</div>
									<div class="chart" :id="'chart_' + row.Id"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<van-loading v-if="showLoading" />
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				showSearch: false,
				objName: api.pageParam.objName,
				objNameArray: api.pageParam.objName.split(','),
				serverIP: 'http://' + FLD.serverIP,
				columnData: []
			},
			created: function () {
				var that = this;
				that.columnData = new Array(that.objNameArray.length)
				that.repeatObj();
			},
			methods: {

				repeatObj() {
					var that = this;
					for (var y in that.objNameArray) {
						that.getColumns(y);
					}
				},

				getColumns(y) {
					var that = this;
					FLD.formConfigAjax('AppChart/GetDataByName', {
						programId: localStorage.getItem("programId"),
						objName: that.objNameArray[y]
					}, function (data) {
						data.ds[0].searchParam = JSON.parse(data.ds[0].searchParam);
						// that.columnData[y] = data.ds[0];
						that.$set(that.columnData,y,data.ds[0]);
						if (that.columnData[y].searchParam.length) {
							that.getFilterArray(y);
						} else {
							that.$set(that.columnData[y], 'filterArray', []);
						}
						that.getSQLData(y);
					})



				},
				getFilterArray(y) {
					var that = this;
					for (var i in that.columnData[y].searchParam) {
						FLD.formConfigAjax('SQLData/GetDataBySql', {
							programId: localStorage.getItem("programId"),
							sql: that.columnData[y].searchParam[i].sql,
							sqlParam: []
						}, function (data) {
							that.$set(that.columnData[y], 'filterArray', data.ds);
						})
					}

				},
				toggleTab(index, item, event) {
					var that = this;
					$(event.target).siblings().removeClass('on');
					$(event.target).addClass('on');

					that.getSQLData(index, item.id);
				},
				getSQLData(y, filtetValue) {
					var that = this;
					var sqlParam = [];
					sqlParam.push({
						key: 'FX_BranchID',
						value: 0
					})
					for (var i in that.columnData[y].searchParam) {
						sqlParam.push({
							key: that.columnData[y].searchParam[i].name.replace(/@/g, ''),
							value: filtetValue || 0
						})
					}
					FLD.formConfigAjax('SQLData/GetDataBySql', {
						programId: localStorage.getItem("programId"),
						sql: that.columnData[y].sql,
						sqlParam: sqlParam
					}, function (data) {
						if (that.columnData[y].chartType == 'total') {
							var valueArray = data.ds;
							var newValueArray = [];
							for (var i in valueArray) {
								var x = 0;
								for (var j in newValueArray) {
									if (valueArray[i].rowNo == newValueArray[j].rowNo) {
										x = 1;
										newValueArray[j].node.push(valueArray[i])
									}
								}
								if (x == 0) {
									newValueArray.push({
										rowNo: valueArray[i].rowNo,
										node: [valueArray[i]]
									})
								}

							}
							that.$set(that.columnData[y], 'valueArray', newValueArray);

						} else if (that.columnData[y].chartType == 'piechart') {

							var valueArray = data.ds2;
							var newValueArray = [];
							for (var i in valueArray) {
								var x = 0;
								for (var j in newValueArray) {
									if (valueArray[i].rowNo == newValueArray[j].rowNo) {
										x = 1;
										newValueArray[j].node.push(valueArray[i])
									}
								}
								if (x == 0) {
									newValueArray.push({
										rowNo: valueArray[i].rowNo,
										node: [valueArray[i]]
									})
								}

							}
							that.$set(that.columnData[y], 'detailChartType', data.ds1[0].type);
							that.$set(that.columnData[y], 'detailChartPosition', data.ds1[0].position);
							that.$set(that.columnData[y], 'valueArray', newValueArray);
							that.setCharts(y, data.ds, 'pie');

						} else if (that.columnData[y].chartType == 'rank') {
							var rankArray = [];
							for (var i in data.ds) {
								var rankObj = {
									title: '',
									node: [],
									total: ''
								};
								for (var j in data.ds[i]) {
									if (rankObj.title) {
										if (j == 'FColT') {
											rankObj.total = data.ds[i][j];
										} else {
											rankObj.node.push(data.ds[i][j]);
										}

									} else {
										rankObj.title = data.ds[i][j]
									}

								}
								rankArray.push(rankObj);
							}
							that.columnData[y].rankArray = rankArray;

							var valueArray = data.ds1;
							var newValueArray = [];
							for (var i in valueArray) {
								var x = 0;
								for (var j in newValueArray) {
									if (valueArray[i].rowNo == newValueArray[j].rowNo) {
										x = 1;
										newValueArray[j].node.push(valueArray[i])
									}
								}
								if (x == 0) {
									newValueArray.push({
										rowNo: valueArray[i].rowNo,
										node: [valueArray[i]]
									})
								}

							}
							that.$set(that.columnData[y], 'valueArray', newValueArray);

						} else if (that.columnData[y].chartType == 'linechart') {

							var valueArray = data.ds2;
							var newValueArray = [];
							for (var i in valueArray) {
								var x = 0;
								for (var j in newValueArray) {
									if (valueArray[i].rowNo == newValueArray[j].rowNo) {
										x = 1;
										newValueArray[j].node.push(valueArray[i])
									}
								}
								if (x == 0) {
									newValueArray.push({
										rowNo: valueArray[i].rowNo,
										node: [valueArray[i]]
									})
								}

							}
							that.$set(that.columnData[y], 'detailChartType', data.ds1[0].type);
							that.$set(that.columnData[y], 'detailChartPosition', data.ds1[0].position);
							that.$set(that.columnData[y], 'valueArray', newValueArray);
							that.setCharts(y, data.ds, 'line');
						}

					})
				},
				setCharts(y, array, type) {
					var that = this;
					var xData = [];
					var yData = [];
					for (var i in array) {
						xData.push(array[i].name);
						yData.push({
							name: array[i].name,
							value: array[i].value,
							itemStyle:{
								color:array[i].color
							}
						});
					}
					that.$nextTick(function () {
						var chart = echarts.init(document.getElementById('chart_' + that.columnData[y].Id));
						if (type == 'pie') {

							var option = {
								legend: {
									orient: 'horizontal',
									left: 'left',
									data: xData
								},
								series: [
									{
										name: '访问来源',
										type: 'pie',
										radius: that.columnData[y].detailChartType == 1?'55%':['45%','65%'],
										center: ['50%', '60%'],
										data: yData,
										label: {
											normal: {
												show: false
											}
										},
										itemStyle: {
											emphasis: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}
								]
							};
						} else if (type == 'line') {
							var lineStyle = {};
							if(array[0] && array[0].color){
								lineStyle.color = array[0].color;
							}
							var option = {
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'cross'
									}
								},
								grid: {
									top: '3%',
									left: '3%',
									right: '3%',
									bottom: '3%',
									containLabel: true
								},
								xAxis: [
									{
										type: 'category',
										boundaryGap: false,
										data: xData
									}
								],
								yAxis: [
									{
										type: 'value'
									}
								],
								series: [
									{
										type: 'line',
										smooth: true,
										lineStyle:lineStyle,
										areaStyle: {
											opacity: that.columnData[y].detailChartType == 2 ? 0 : 0.6
										},
										data: yData
									}
								]
							};
						}
						chart.setOption(option);
					})
				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>